<template>
  <view class="warp">
    <u-sticky h5-nav-height="0">
      <u-tabs :list="list" :is-scroll="false" :current="current"
        @change="change"></u-tabs>
    </u-sticky>

    <view class="index_warp">
      <view class="item flex_b" v-for="item in showList"
        :key="item.coursePackageId" @click="goExercise(item)">
        <view class="score flex_c">{{ item.fraction }}</view>
        <view class="right">
          <view class="name hid2">{{ item.name }}</view>
          <view class="time">开始时间: {{ item.timer }}</view>
        </view>
        <view class="iconfont icon-right" />
      </view>
    </view>
    <!-- <view class="no_index flex_y_a">
      <view class="no_img_warp">
        <image src="@/static/images/no_problem.png" />
      </view>
      <view class="no_title">暂时没有记录</view>
    </view> -->
  </view>
</template>

<script>
  import {
    userinfoQuestion
  } from "@/api/course";
  import {
    userProblemTabs
  } from "@/config/list";
  import {
    formatTime,
    UTCformat
  } from "@/utils/util";
  export default {
    data() {
      return {
        list: userProblemTabs,
        current: 0,
        pageList: [1, 1],
        pageSize: 20,
        oldList: [],
        hasMore: true,
        showType: "list",
      };
    },
    onLoad() {
      this.list.forEach((v, i) => {
        this.oldList[i] = {
          list: [],
          total: 0,
        };
      });
      this.getList();
    },
    onReachBottom() {
      this.$u.throttle(this.getList(), 500, true);
    },
    methods: {
      goExercise(item) {
        this.$u.route("/pages/exercises/exercises", {
          item: JSON.stringify(item)
        });
      },
      getList() {
        const {
          pageNum,
          pageSize,
          current,
          hasMore,
          showList
        } = this;
        if (!hasMore) {
          this.$ShowToast({
            title: "没有更多了!",
          });
          return;
        }
        const params = {
          pageNum,
          pageSize,
          questionType: current
        };
        userinfoQuestion(params).then((res) => {
          if (res.list.length) {
            res.list.forEach((v) => {
              v.timer = UTCformat(v.createTime);
            });
          }
          this.pageNum = pageNum + 1;
          let obj = {
            total: res.total,
            list: [...showList, ...res.list],
          };
          this.showList = obj;
          if (res.list.length < pageSize) {
            this.hasMore = false;
          }
        });
      },
      change(e) {
        this.current = e;
        if (this.showList.length === 0) {
          this.getList();
        }
      },
    },
    computed: {
      pageNum: {
        get() {
          return this.pageList[this.current];
        },
        set(num) {
          this.$set(this.pageList, this.current, num);
        },
      },
      showList: {
        get() {
          return this.oldList[this.current].list;
        },
        set(obj) {
          this.$set(this.oldList, this.current, obj);
        },
      },
    },
  };
</script>

<style lang="scss" scoped>
  .index_warp {
    padding: 30upx;

    .item {
      padding: 30upx 20upx 30upx 30upx;
      width: 690upx;
      height: 200upx;
      background: #ffffff;
      box-shadow: 0px 6upx 12upx rgba(0, 122, 255, 0.05);
      border-radius: 20upx;
      margin-bottom: 30upx;

      .score {
        width: 100upx;
        height: 100upx;
        background: #52c41a;
        border-radius: 50%;
        overflow: hidden;
      }

      .right {
        .name {
          width: 420upx;
          height: 80upx;
          font-weight: 800;
          line-height: 40upx;
        }

        .time {
          margin-top: 26upx;
          height: 34upx;
          font-size: 24upx;
          font-weight: 500;
          line-height: 34upx;
          color: #999999;
        }
      }

      .iconfont {
        font-size: 20upx;
      }
    }
  }

  .no_index {
    width: 100vw;
    height: 100vh;

    .no_img_warp {
      margin-top: 282upx;
      width: 478upx;
      height: 360upx;
    }

    .no_title {
      margin-top: 26upx;
      width: 180upx;
      height: 42upx;
      font-size: 30upx;
      font-weight: 500;
      line-height: 68upx;
      color: #999999;
    }
  }
</style>
